<template>
  <MainLayout>
    <section class="banner-section">
      <div class="container">
        <div class="banner-content">
          <h1 class="banner-title">更好的3D可视化交互</h1>
          <p class="banner-description">
            AnyRender是一个用于创建和管理互动式3D设计的在线平台，基于浏览器，无需下载安装。
          </p>
          <div class="banner-buttons">
            <button class="btn btn-outline" @click="jump('/login')">注册</button>
            <button class="btn btn-primary" @click="jump('/business/businessVersion')">预约商业版</button>
          </div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/home/head.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">您的3D工作流所需的一切</div>
        <div class="threeD-tips">强大的功能</div>
        <div class="threeD-description">
          建模、导入、编辑、协作、展示和发布您的创意，所有这些都在一个平台上设计师、工程师、产品经理、营销人员等使用AnyRender保持领先地位
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/home/shebei.jpg" alt="" />
      </div>
    </section>

    <section class="logo-list-section">
      <div class="container">
        <div class="logo-list-title">广受国际公司好评</div>
        <div class="logo-list">
          <img class="logo-item-img" :src="`/images/home/logo/${i}.png`" v-for="i in 7" :key="i" alt="" />
        </div>
      </div>
    </section>

    <section class="team-section">
      <div class="container">
        <div class="team-title">适配大中小型团队</div>
        <div class="team-list">
          <div class="team-item">
            <div class="team-item-title">协同合作</div>
            <div class="team-item-description">
              沟通和共享实用功能，从任何设备轻松访问项目。文件复制、设计内注释，以及将整个3D场景轻松嵌入到演示文稿或生产力工具中。
            </div>
          </div>
          <div class="team-item">
            <div class="team-item-title">安全生产</div>
            <div class="team-item-description">
              业务工作区使公司管理员能够在不影响安全性的情况下分发和监管用户角色、项目访问和其他提高团队生产力的功能。
            </div>
          </div>
          <div class="team-item">
            <div class="team-item-title">组织管理</div>
            <div class="team-item-description">
              为每个项目、客户或部门设置团队工作区。存储您的设计，并直接从画布上访问它们。与任何人共享项目链接。让它成为您的集成3D设计中心。
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="find-btn-section">
      <div class="container">
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/business/api')">发现更多解决方案</div>
        </div>
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">不仅仅是展示&nbsp;&nbsp;更有空间标注</div>
        <div class="threeD-tips">强大的功能</div>
        <div class="threeD-description">
          AnyRender平台允许您通过使用交互、动画和众多用户界面选项来获得想法并完成工作，将产品概念转化为完整的体验。
        </div>
      </div>
    </section>
    <section class="find-btn-section">
      <div class="container">
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/seek/interact')">了解互动和动画</div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/home/chuifengji.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">探索空间设计和数字孪生</div>
        <div class="threeD-tips">增强现实</div>
        <div class="threeD-description">
          受益于在一个平台上拥有混合现实工具。在您的台式机或手机上导入3D文件或构建您自己的模型，在增强现实中或使用虚拟现实设备查看它们。
        </div>
      </div>
    </section>
    <section class="find-btn-section">
      <div class="container">
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/seek/ar')">了解增强现实功能</div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/home/kongjiansheji.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-tips">沟通与分享</div>
        <div class="threeD-title">任意发送可以互动的3D查看器</div>
        <div class="threeD-description">
          忘记文件传输或电子邮件附件，您只需要一个链接。只需单击共享按钮，即可从任何设备（包括虚拟现实眼镜）完全访问您的3D设计。
        </div>
        <div class="threeD-description">试一下，复制链接并将其添加到任何在线生产力工具、演示文稿或聊天中。</div>
      </div>
    </section>
    <section class="find-btn-section">
      <div class="container">
        <div class="find-btn">
          <div class="find-btn-txt">复制链接</div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/home/3dview.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">适用于所有行业的创意解决方案</div>
        <div class="threeD-tips">设计创新</div>
        <div class="sheji-list">
          <div class="sheji-item" v-for="(item, i) in shejiList" :key="item.title">
            <img class="sheji-item-img" :src="`/images/home/idea/${i + 1}.jpg`" alt="" />
            <div class="sheji-item-title">{{ item.title }}</div>
            <div class="sheji-item-description">{{ item.description }}</div>
            <div class="sheji-item-btn">查看演示</div>
          </div>
        </div>
      </div>
    </section>

    <section class="share-section">
      <div class="container">
        <div class="share-title">导入到AnyRender进行编辑和共享</div>
        <div class="share-list">
          <div class="share-item" v-for="i in 15" :key="i">
            <img class="share-item-img" :src="`/images/home/share/${i}.png`" alt="" />
          </div>
        </div>
        <div class="share-swiper">
          <el-carousel trigger="click" arrow="always" indicator-position="outside" height="150px">
            <el-carousel-item v-for="i in 15" :key="i">
              <img class="share-item-img" :src="`/images/home/share/${i}.png`" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="share-more">更多...</div>
      </div>
    </section>

    <section class="join-section">
      <div class="container">
        <div class="join-title">准备好进入了吗？</div>
        <div class="join-list">
          <div class="join-item" v-for="item in joinList" :key="item.title">
            <img class="join-item-img" :src="`/images/home/${item.img}`" alt="" />
            <div class="join-item-tips">{{ item.tips }}</div>
            <div class="join-item-title">{{ item.title }}</div>
            <div class="join-item-description">{{ item.description }}</div>
            <div class="join-item-btn" @click="jump(item.path)">{{ item.btntxt }}</div>
          </div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  let shejiList = [
    {
      title: "交通",
      description: "不仅通过显示项目的外观，还显示其行为方式，为产品演示带来额外的功能。",
    },
    {
      title: "消费品",
      description: "面向内部使用、店内和在线零售的沉浸式产品展示的多用途设计解决方案。",
    },
    {
      title: "制造业",
      description: "通过3D和AR转换实现通信解决方案的现代化，同时降低风险和成本。",
    },
    {
      title: "电子产品",
      description: "保持领先地位，简化产品开发，从概念到最终零售阶段。",
    },
    {
      title: "展会",
      description: "AR是任何实体或混合贸易展台规划和现场展示的最佳解决方案。",
    },
    {
      title: "家具",
      description: "为制造团队和零售规划提供多功能性、设计自由度和指导。",
    },
  ];
  let joinList = [
    {
      img: "zhuanye.jpg",
      tips: "对于个人",
      title: "AnyRender 专业版",
      description:
        "设计师向客户或任何外部合作伙伴提供概念的理想计划。受益于访问设置高质量可视化、交互式体验和多个共享选项的功能。",
      btntxt: "注册",
      path: "/register",
    },
    {
      img: "shangye.jpg",
      tips: "对于团队",
      title: "AnyRender 商业版",
      description:
        "公司的解决方案和功能，将工作流程顺利集成到任何3D流程中，将部门和设计平台聚集在一起。管理任何团队规模的访问权限和文件安全性。",
      btntxt: "预约商业版",
      path: "/business/contact",
    },
  ];

  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .banner-section {
    .container {
      .banner-content {
        padding: 80px 0;
        text-align: center;

        .banner-title {
          font-size: 70px;
          font-weight: 500;
          color: #000;
          letter-spacing: 10px;
          line-height: 1.6;
          margin-bottom: 20px;
        }

        .banner-description {
          font-size: 16px;
          color: #383838;
          margin-bottom: 40px;
        }

        .banner-buttons {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          .btn {
            padding: 6px 30px;
            min-width: 150px;
            text-align: center;
            border-radius: 6px;
            border: 1px solid #703ffa;
            font-size: 16px;
            font-weight: normal;
          }
          .btn-outline {
            color: #703ffa;
            &:hover {
              background-color: #703ffa;
              color: #fff;
            }
          }
          .btn-primary {
            background-color: #703ffa;
            color: #fff;
            &:hover {
              background-color: transparent;
              color: #703ffa;
            }
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .banner-content {
          padding: 80px 0;
          .banner-title {
            font-size: 60px;
            letter-spacing: 8px;
            margin-bottom: 16px;
          }

          .banner-description {
            font-size: 16px;
            margin-bottom: 40px;
          }

          .banner-buttons {
            .btn {
              padding: 6px 30px;
              min-width: 150px;
              font-size: 16px;
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .banner-content {
          padding: 60px 0;
          .banner-title {
            font-size: 48px;
            letter-spacing: 4px;
            margin-bottom: 14px;
          }

          .banner-description {
            font-size: 16px;
            margin-bottom: 40px;
          }

          .banner-buttons {
            .btn {
              padding: 6px 25px;
              min-width: 120px;
              font-size: 16px;
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .banner-content {
          padding: 30px 0;
          .banner-title {
            font-size: 32px;
            letter-spacing: 4px;
            margin-bottom: 14px;
          }

          .banner-description {
            font-size: 14px;
            margin-bottom: 20px;
          }

          .banner-buttons {
            .btn {
              padding: 6px 20px;
              min-width: 100px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .img-section {
    padding: 20px 0 40px;
    .container {
      .img-section-img {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
      }
    }
  }

  .threeD-section {
    padding: 40px 0;
    color: #000;
    text-align: center;
    .container {
      .threeD-title {
        font-size: 48px;
        font-weight: 500;
        letter-spacing: 7px;
      }
      .threeD-tips {
        font-size: 22px;
        margin: 20px auto;
      }
      .threeD-description {
        width: 50%;
        margin: 15px auto;
        font-size: 16px;
        color: #5c5c5c;
      }
      .sheji-list {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 20px;
        .sheji-item {
          width: calc(33.33% - 20px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .sheji-item-img {
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
          }
          .sheji-item-title {
            width: 100%;
            font-size: 30px;
            font-weight: 500;
            color: #000;
            text-align: left;
            margin: 30px auto 20px;
          }
          .sheji-item-description {
            font-size: 16px;
            color: #383838;
            text-align: left;
            margin-bottom: 20px;
          }
          .sheji-item-btn {
            width: fit-content;
            display: inline-block;
            font-size: 16px;
            border: 1px solid #703ffa;
            color: #703ffa;
            border-radius: 10px;
            padding: 4px 20px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            &:hover {
              background-color: #703ffa;
              color: #fff;
            }
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-title {
          font-size: 36px;
          letter-spacing: 6px;
        }
        .threeD-tips {
          font-size: 18px;
          margin: 20px auto;
        }
        .threeD-description {
          width: 80%;
          font-size: 16px;
        }
        .sheji-list {
          .sheji-item {
            width: calc(50% - 20px);

            .sheji-item-title {
              font-size: 28px;
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-title {
          font-size: 32px;
          letter-spacing: 5px;
        }
        .threeD-tips {
          font-size: 18px;
          margin: 18px auto;
        }
        .threeD-description {
          width: 80%;
          font-size: 16px;
        }
        .sheji-list {
          gap: 20px;
          .sheji-item {
            width: 100%;

            .sheji-item-title {
              font-size: 26px;
              margin: 30px auto 20px;
            }
            .sheji-item-description {
              font-size: 16px;
              margin-bottom: 20px;
            }
            .sheji-item-btn {
              font-size: 16px;
              padding: 4px 20px;
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-title {
          font-size: 28px;
          letter-spacing: 4px;
        }
        .threeD-tips {
          font-size: 16px;
          margin: 14px auto;
        }
        .threeD-description {
          font-size: 14px;
        }
        .sheji-list {
          .sheji-item {
            width: 100%;

            .sheji-item-title {
              font-size: 26px;
              text-align: center;
              margin: 30px auto 20px;
            }
            .sheji-item-description {
              font-size: 16px;
              margin-bottom: 20px;
            }
            .sheji-item-btn {
              margin: 10px auto;
              font-size: 16px;
              padding: 4px 20px;
            }
          }
        }
      }
    }
  }

  .logo-list-section {
    background-color: #f7f7f7;
    padding: 50px 0 80px;
    .container {
      padding: 1px 16px;
      .logo-list-title {
        font-size: 44px;
        font-weight: 500;
        letter-spacing: 10px;
        text-align: center;
        margin: 40px 0;
      }
      .logo-list {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 16px;
        .logo-item-img {
          height: 72px;
          cursor: pointer;
        }
      }
      // 响应式 大屏幕
      @media (max-width: $breakpoint-large-desktop) {
        .logo-list {
          gap: 14px;
          .logo-item-img {
            height: 66px;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .logo-list-title {
          font-size: 36px;
          letter-spacing: 8px;
          margin: 30px 0;
        }
        .logo-list {
          flex-wrap: wrap;
          gap: 12px;
          .logo-item-img {
            height: 54px;
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .logo-list-title {
          font-size: 26px;
          letter-spacing: 6px;
          margin: 20px 0;
        }
        .logo-list {
          gap: 10px;
          .logo-item-img {
            height: 40px;
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
      }
    }
  }

  .team-section {
    padding: 40px 0 90px;
    .container {
      padding: 1px 16px;
      .team-title {
        font-size: 44px;
        font-weight: 500;
        text-align: center;
        color: #000;
        margin: 50px auto;
        letter-spacing: 10px;
      }
      .team-list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        .team-item {
          width: calc(33.33% - 20px);
          .team-item-title {
            font-size: 22px;
            font-weight: 500;
            color: #000;
            margin-bottom: 12px;
          }
          .team-item-description {
            font-size: 16px;
            color: #585858;
          }
        }
      }
    }

    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      padding: 30px 16px 80px;
      .container {
        .team-title {
          font-size: 36px;
          margin: 36px auto;
          letter-spacing: 8px;
        }
        .team-list {
          flex-wrap: wrap;
          .team-item {
            width: 100%;
            .team-item-title {
              font-size: 18px;
            }
            .team-item-description {
              font-size: 16px;
            }
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 24px 16px 60px;
      .container {
        .team-title {
          font-size: 32px;
          margin: 32px auto;
          letter-spacing: 6px;
        }
        .team-list {
          flex-wrap: wrap;
          .team-item {
            width: 100%;
            .team-item-title {
              font-size: 18px;
            }
            .team-item-description {
              font-size: 14px;
            }
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 20px 16px 50px;
      .container {
        .team-title {
          font-size: 28px;
          margin: 28px auto;
          letter-spacing: 4px;
        }
        .team-list {
          flex-wrap: wrap;
          .team-item {
            width: 100%;
            .team-item-title {
              font-size: 16px;
            }
            .team-item-description {
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .find-btn {
    margin: 60px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 6px 30px;
      min-width: 150px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      &:hover {
        background-color: transparent;
        color: #703ffa;
      }
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 30px auto;
      .find-btn-txt {
        margin: 60px auto 40px;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }

  .share-section {
    padding: 40px 0 90px;
    background-color: #f7f7f7;
    .container {
      padding: 1px 16px;
      .share-title {
        color: #000;
        font-size: 44px;
        font-weight: 500;
        text-align: center;
        margin: 50px auto;
        letter-spacing: 10px;
      }
      .share-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .share-item {
          width: calc(20%);
          .share-item-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .share-swiper {
        display: none;
      }
      .share-more {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
        font-size: 16px;
        color: #929292;
        cursor: pointer;
      }
    }
    // 响应式 大屏幕
    @media (max-width: $breakpoint-large-desktop) {
      .container {
        .share-title {
          font-size: 36px;
          letter-spacing: 8px;
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      padding: 40px 0 70px;
      .container {
        .share-title {
          font-size: 32px;
          margin: 40px auto;
          letter-spacing: 6px;
        }
        .share-list {
          .share-item {
            width: 33.33%;
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 30px 0 60px;
      .container {
        .share-title {
          font-size: 28px;
          margin: 40px auto;
          letter-spacing: 2px;
        }
        .share-list {
          display: none;
        }
        .share-swiper {
          display: block;
          :deep(.el-carousel__item) {
            display: flex;
            justify-content: center;
            align-items: center;
            .share-item-img {
              height: 150px;
            }
          }
          :deep(.el-carousel__indicator.el-carousel__indicator--horizontal) {
            .el-carousel__button {
              width: 12px;
              height: 3px;
              border-radius: 50%;
            }
            &.is-active {
              .el-carousel__button {
                background-color: #fff;
              }
            }
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 20px 0 40px;
      .container {
        .share-title {
          font-size: 24px;
          margin: 30px auto;
          letter-spacing: 2px;
        }
        .share-more {
          margin: 20px auto;
          font-size: 14px;
        }
      }
    }
  }

  .join-section {
    padding: 40px 0 90px;
    .container {
      padding: 1px 16px;
      .join-title {
        font-size: 44px;
        font-weight: 500;
        text-align: center;
        margin: 50px auto;
        letter-spacing: 10px;
      }
      .join-list {
        display: flex;
        justify-content: center;
        gap: 30px;
        .join-item {
          width: calc(50% - 20px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .join-item-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
          }
          .join-item-tips {
            font-size: 14px;
            color: #a6a6a6;
            margin-bottom: 10px;
          }
          .join-item-title {
            font-size: 30px;
            font-weight: 500;
            color: #000;
            margin-bottom: 20px;
          }
          .join-item-description {
            font-size: 16px;
            color: #383838;
            margin-bottom: 20px;
          }
          .join-item-btn {
            display: inline-block;
            width: fit-content;
            font-size: 16px;
            color: #fff;
            background-color: #703ffa;
            border: 1px solid #703ffa;
            padding: 6px 18px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            &:hover {
              background-color: transparent;
              color: #703ffa;
            }
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      padding: 40px 0 70px;
      .container {
        .join-title {
          font-size: 36px;
          margin: 40px auto;
          letter-spacing: 6px;
        }
        .join-list {
          flex-wrap: wrap;
          .join-item {
            width: 100%;
            .join-item-title {
              font-size: 30px;
            }
            .join-item-description {
              font-size: 16px;
            }
            .join-item-btn {
              font-size: 16px;
            }
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 30px 0 60px;
      .container {
        .join-title {
          font-size: 32px;
          margin: 30px auto;
          letter-spacing: 4px;
        }
        .join-list {
          .join-item {
            .join-item-title {
              font-size: 24px;
            }
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 20px 0 40px;
      .container {
        .join-title {
          font-size: 28px;
          margin: 20px auto;
          letter-spacing: 2px;
        }
        .join-list {
          .join-item {
            .join-item-tips {
              font-size: 12px;
            }
            .join-item-title {
              font-size: 24px;
            }
            .join-item-description,
            .join-item-btn {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
</style>
